<template>
	<!-- 添加银行卡 -->
	<view >
		<view class="bank-form">
			<!-- <view class="bank-title-1">
				经营提现享安全便携
			</view> -->
			<view class="bank-title-2">
				绑定至您本人银行卡，以保障资金安全
			</view>
			<view class="bank-table">
				<view class="table-name">持卡人</view>
				<input class="inputtag" type="text" v-model="name" placeholder="请输入持卡人姓名">
			</view>
			
			
			<picker @change="bindPickerChange" :value="index" :range="banklist" range-key="bank_name">
				<view class="bank-table">
					<view class="table-name">开户行</view>
					<input class="inputtag" v-model="bank_name" disabled="disabled" type="text" placeholder="请选择开户行">
				</view>
			</picker>

			<view class="bank-table">
				<view class="table-name">银行卡号</view>
				<input class="inputtag" v-model="bank_num" type="text" placeholder="请输入银行卡号">
			</view>

			
			<view class="bank-table">
				<view class="table-name">开支户行</view>
				<input class="inputtag" v-model="open_address" type="text" placeholder="请输入开户支行">
			</view>
		</view>

		<view class="bindbankbtn" @tap="addBankCardFun">绑定银行卡</view>
		
	</view>
</template>

<script>
	import {addBankCard ,selectBank} from "@/utils/api/user.js";
	export default {
		data(){
			return {
				name:"",
				bank_name:"",
				bank_num:"",
				open_address:"",
				bank_code:"",//银行代码
				wx_bank_code:"",//微信银行code
				
				banklist:[
					{
						"id":1,
						"bank_name":"中国建设银行",
						"bank_code":"CCB",
						"wx_code":"1003"
					},
					{
						"id":2,
						"bank_name":"中国农业银行",
						"bank_code":"ABC",
						"wx_code":"1005"
					},
					{
						"id":3,
						"bank_name":"中国银行",
						"bank_code":"BOC",
						"wx_code":"1026"
					},
					{
						"id":4,
						"bank_name":"招商银行",
						"bank_code":"CMBCHINA",
						"wx_code":"1001"
					},
					{
						"id":5,
						"bank_name":"广发银行",
						"bank_code":"CGB",
						"wx_code":"1027"
					},
					{
						"id":7,
						"bank_name":"中国民生银行",
						"bank_code":"CMBC",
						"wx_code":"1006"
					},
					{
						"id":10,
						"bank_name":"中国光大银行",
						"bank_code":"CEB",
						"wx_code":"1022"
					},
					{
						"id":11,
						"bank_name":"交通银行",
						"bank_code":"BOCO",
						"wx_code":"1020"
					},
					{
						"id":13,
						"bank_name":"中信银行",
						"bank_code":"ECITIC",
						"wx_code":"1021"
					},
					{
						"id":14,
						"bank_name":"华夏银行",
						"bank_code":"HXB",
						"wx_code":"1025"
					},
					{
						"id":15,
						"bank_name":"中国邮政储蓄银行",
						"bank_code":"POST",
						"wx_code":"1066"
					},
					{
						"id":16,
						"bank_name":"中国工商银行",
						"bank_code":"ICBC",
						"wx_code":"1002"
					},
					{
						"id":17,
						"bank_name":"浦发银行",
						"bank_code":"SPD",
						"wx_code":"1004"
					},
					{
						"id":18,
						"bank_name":"兴业银行",
						"bank_code":"CIB",
						"wx_code":"1009"
					},
					{
						"id":19,
						"bank_name":"平安银行",
						"bank_code":"PAB",
						"wx_code":"1010"
					},
					{
						"id":20,
						"bank_name":"北京银行",
						"bank_code":"BOB",
						"wx_code":"4836"
					},
					{
						"id":21,
						"bank_name":"宁波银行",
						"bank_code":"NINGBO",
						"wx_code":"1056"
					},
					{
						"id":22,
						"bank_name":"上海银行",
						"bank_code":"Shanghai",
						"wx_code":"1024"
					}
				],//银行卡类型
				index:-1,
			}
		},
		onLoad() {
			// this.selectBankFun();
		},
		methods:{
			//添加银行卡
			addBankCardFun(){
				if(!this.name){
					this.$api.msg("请填写姓名");
					return false;
				}
				
				if(!this.bank_name){
					this.$api.msg("请选开户行");
					return false;
				}
				
				if(!this.bank_num){
					this.$api.msg("请输入银行卡号");
					return false;
				}
				
				if(!this.open_address){
					this.$api.msg("请输入开户支行");
					return false;
				}
				addBankCard({
					name:this.name,
					bank_name:this.bank_name,
					bank_num:this.bank_num,
					open_address:this.open_address,
					// bank_code:this.bank_code,//银行代码
					// wx_bank_code:this.wx_bank_code,//微信提现code
				}).then((res)=>{
					if(res.code==1){
						this.$api.msg(res.msg);
						setTimeout(()=>{
							uni.navigateBack();
						},1500)
					}else{
						this.$api.msg(res.msg);
					}
				})
			},
			//选择银行卡类型
			selectBankFun(){
				selectBank({
					
				}).then((res)=>{
					if(res.code==1){
						this.banklist = res.data.banklist;
					}
				})
			},
			//选中银行卡类型之后
			bindPickerChange(e){
				// console.info(e,"e");
				let sel_index = e.detail.value;
				this.index = sel_index;
				this.bank_name = this.banklist[sel_index].bank_name;//银行名称
				// this.bank_code = this.banklist[sel_index].bank_code;//银行代码
				// this.wx_bank_code = this.banklist[sel_index].wx_code;//微信银行代码
			}
		}
	}
</script>

<style lang="scss">
	@import "./bind_bank.scss"
</style>